import {AttrStrMap, UnitAttribute} from "../../../script/frame/dataSource/DataModel";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import AttrShowBar from "../component/AttrShowBar";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {AttrBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {ColorStr} from "../../../script/type/Type";

interface IProp {
    getAttrFun: (player: PlayerModel) => UnitAttribute
}
interface IState {
    attr: UnitAttribute;
}


export default class AttrBar extends AttrBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,
            attr: new UnitAttribute(),
        }
    }

    render = () => {
        const paddingL = 0.025
        const ySpace = 0.129;

        const backSize = { h: 0.6308, w: 0.5625 };
        const backPos = { x: 0.25, y: 0.1 }

        const attrTitleMargin = { l: 0.0001, t: 0.0166 }
        const attrTitleSize = { h: 0.05, w: 0.1125 }

        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        const attrBackImage =  Configer.getResource(ResourceKey.attrBackImage);

        const AttrStrAttackMapArr = Configer.getUIConfig(UIConfigKey.AttrStrAttackMapArr) as AttrStrMap[];
        const AttrStrLiveMapArr = Configer.getUIConfig(UIConfigKey.AttrStrLiveMapArr) as AttrStrMap[];
        // const AttrStrNormalMapArr = Configer.getUIConfig(UIConfigKey.AttrStrNormalMapArr) as AttrStrMap[];
        // const AttrStrSpecialMapArr = Configer.getUIConfig(UIConfigKey.AttrStrSpecialMapArr) as AttrStrMap[];

        const itemHeight = 0.022

        const closeIconSize: { w: number, h: number } = Configer.getUIConfig(UIConfigKey.closeIconSize);
        const closeIcon: string = Configer.getResource(ResourceKey.barCloseButton);

        return <View   key={GuiKeys.attrBarCon} style={{ hidden: !this.state.visible, backgroundImage: attrBackImage, width: backSize.w, height: backSize.h, top: backPos.y, left: backPos.x, paddingT: ySpace, paddingL: paddingL }}>
            <View   key={GuiKeys.attrBarAttack} style={{  width: attrTitleSize.w , height: backSize.h, marginL: attrTitleMargin.l }}>
                {/*<View   key={GuiKeys.attrBarNormalTitle} style={{ backgroundImage: attrTitleImage, fontSize: 0.01, marginL: attrTitleMargin.l, marginT: attrTitleMargin.t, width: attrTitleSize.w, height: attrTitleSize.h, fontAlign: TextAlign.center, paddingT: 0.01, marginB: 0.01 }}>基本属性</View>*/}
                <AttrShowBar   key={GuiKeys.attrBarAttackAttrContent} hideName={true} attr={this.state.attr} attrStrMaps={AttrStrAttackMapArr} width={attrTitleSize.w} height={itemHeight} attrSize={{ h: 0.016, w: 0.045 }} textAlign={TextAlign.behind} color={ColorStr.black}></AttrShowBar>
            </View>
            <View   key={GuiKeys.attrBarLive} style={{ width: attrTitleSize.w, height: backSize.h, marginL: attrTitleMargin.l }}>
                {/*<View   key={GuiKeys.attrBarSpecialTitle} style={{ backgroundImage: attrTitleImage, fontSize: 0.01, marginL: attrSpecialTitleMargin.l,marginT: attrSpecialTitleMargin.t, width: attrSpecialTitleSize.w, height: attrSpecialTitleSize.h, fontAlign: TextAlign.center, paddingT: 0.01, marginB: 0.01 }}>特殊属性</View>*/}
                <AttrShowBar   key={GuiKeys.attrBarLiveAttrContent} hideName={true} attr={this.state.attr} attrStrMaps={AttrStrLiveMapArr} width={attrTitleSize.w} height={itemHeight} attrSize={{ h: 0.016, w: 0.045 }} textAlign={TextAlign.behind} color={ColorStr.black}></AttrShowBar>
            </View>
            {/*<View   key={GuiKeys.attrBarNormal} style={{ width: attrTitleSize.w, height: backSize.h, marginL: attrTitleMargin.l }}>*/}
            {/*    /!*<View   key={GuiKeys.attrBarSpecialTitle} style={{ backgroundImage: attrTitleImage, fontSize: 0.01, marginL: attrSpecialTitleMargin.l,marginT: attrSpecialTitleMargin.t, width: attrSpecialTitleSize.w, height: attrSpecialTitleSize.h, fontAlign: TextAlign.center, paddingT: 0.01, marginB: 0.01 }}>特殊属性</View>*!/*/}
            {/*    <AttrShowBar   key={GuiKeys.attrBarNormalAttrContent} attr={this.state.attr} attrStrMaps={AttrStrNormalMapArr} width={attrTitleSize.w} height={itemHeight} attrSize={{ h: 0.016, w: 0.045 }}></AttrShowBar>*/}
            {/*</View>*/}
            {/*<View   key={GuiKeys.attrBarSpecial} style={{ width: attrTitleSize.w, height: backSize.h, marginL: attrTitleMargin.l }}>*/}
            {/*    /!*<View   key={GuiKeys.attrBarSpecialTitle} style={{ backgroundImage: attrTitleImage, fontSize: 0.01, marginL: attrSpecialTitleMargin.l,marginT: attrSpecialTitleMargin.t, width: attrSpecialTitleSize.w, height: attrSpecialTitleSize.h, fontAlign: TextAlign.center, paddingT: 0.01, marginB: 0.01 }}>特殊属性</View>*!/*/}
            {/*    <AttrShowBar   key={GuiKeys.attrBarSpecialAttrContent} attr={this.state.attr} attrStrMaps={AttrStrSpecialMapArr} width={attrTitleSize.w} height={itemHeight} attrSize={{ h: 0.016, w: 0.045 }}></AttrShowBar>*/}
            {/*</View>*/}
            <View   onMouseDown={() => { return this.clickClose() } } key={GuiKeys.pageContentClose} style={{ float: true, backgroundImage: closeIcon, width: closeIconSize.w, height: closeIconSize.h, marginL: backSize.w - closeIconSize.w - paddingL, marginT: -ySpace / 2 }}></View>
        </View>
    }

    clickClose = () => {
        const syncData: UISyncData = { id: SyncId.closeUI, param: { guiId: GuiId.attrBar } };
        return syncData;
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }
    openBar = () => {
        const attr = this.props.getAttrFun(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ...this.state,
            visible: true,
            attr,
        })
    }
    getVisible = () => {
        return this.state.visible;
    }
}